<!-- 首页 -->

<template>
  <div class="index">
    <mt-loadmore v-if="pageInfo.hasMore" :top-method="loadTop" :bottom-method="loadBottom" ref="loadmore">
      <book-item v-for="book of books" :key="book.name" :book="book" />
    </mt-loadmore>
    <div v-else>
      <book-item v-for="book of books" :key="book.name" :book="book" />
    </div>
    <transition name="slide">
      <Sift v-show="showSift" @back="goBack" />
    </transition>
    <transition name="slide">
      <BindPhone v-show="showBindPhone" @back="goBack2" />
    </transition>
    <tab-bar></tab-bar>
  </div>
</template>

<script>
import TabBar from "@/components/base/tab-bar/tab-bar";
import BookItem from "@/components/base/book-item/book-item";
import Sift from "@/components/sift/sift";
import BindPhone from "@/components/login/bind-phone";
import { mapGetters, mapMutations } from "vuex";

export default {
  components: {
    TabBar,
    BookItem,
    Sift,
    BindPhone
  },
  data() {
    return {
      books: [],
      pageInfo: {
        currentPage: 0,
        hasMore: false
      },
      showLoading: false,
      showSift: false,
      showBindPhone: false,
      class_: 0,
      isInit: false
    };
  },
  props: {},
  watch: {},
  methods: {
    loadBottom() {
      this.$refs.loadmore.onBottomLoaded();
      if (this.pageInfo.hasMore) this._initIndexListData();
    },
    loadTop() {
      this.$refs.loadmore.onTopLoaded();
      this._initIndexListData(true);
    },
    goMore(id) {
      this.$router.push(`/product_list/${id}`);
    },
    // 初始化列表数据
    _initIndexListData(isInit) {
      if (!!this.showLoading) return;
      this.showLoading = true;
      // this.$$api_book_myArticleList({
      this.$$api_book_queryBooksListByClass({
        data: {
          class_: this.class_,
          page: this.pageInfo,
          currentPage: isInit
            ? (this.pageInfo.currentPage = 0)
            : (this.pageInfo.currentPage += 1)
        },
        fn: res => {
          this.books = isInit ? res : [...this.books, ...res];
          this.$nextTick(() => (this.showLoading = false));
        }
      });
    },
    goBack() {
      this.showSift = false;
    },
    goBack2() {
      this.showBindPhone = false;
    },
    ...mapMutations(["IS_INIT"])
  },
  filters: {},
  computed: {
    ...mapGetters(["userID", "isInit", "studentId"])
  },
  created() {
    // 初始化列表数据
    this._initIndexListData(true);
  },
  mounted() {
    if (this.isInit) return;
    setTimeout(() => {
      this.IS_INIT(true);
      // this.showSift = true;
      this.showBindPhone = true;
    }, 1500);
  },
  destroyed() {}
};
</script>

<style lang="scss" scoped>
@import "~@/assets/scss/const.scss";
@import "~@/assets/scss/mixin.scss";

.index {
  background: $app-background-color;
  padding-bottom: 50px;
}

.slide-enter-active,
.slide-leave-active {
  transition: all 0.3s linear;
}

.slide-enter,
.slide-leave-to {
  opacity: 0;
  transform: translate3d(100%, 0, 0);
}
</style>
